<% layout('/layouts/default.html', {title: '拍照', libs: ['dataGrid']}){ %>
<div class="allDiv">
    <div class="camera">
        <div>扫描二维码</div>
        <video id="video" controls>
        </video>
        <div>
            <button id="capture" style="margin-left: 48%;margin-top: 3%" hidden>拍照</button>
        </div>
        <canvas id="canvas" width="560" height="320" style="display: none"></canvas>

    </div>

    <div id="appendDiv" class="appendDiv">
        <div id="div9"><span id="span9"></span></div>
        <div id="div8"><span id="span8"></span></div>
        <div id="div7"><span id="span7"></span></div>
        <div id="div6"><span id="span6"></span></div>
        <div id="div5"><span id="span5"></span></div>
        <div id="div4"><span id="span4"></span></div>
        <div id="div3"><span id="span3"></span></div>
        <div id="div2"><span id="span2"></span></div>
        <div id="div1"><span id="span1"></span></div>
    </div>
</div>
<% } %>
<style type="text/css">
    #video {
        display: block;
        margin: 0 auto;
        width: 600px;
        height: 500px;
        background: #000;
        border-radius: 5px;
    }

    .camera {
        text-align: center;
        float: left;
        width: 100%;
    }

    .appendDiv {
        float: right;
        width: 20%;
        margin-top: -25%;
    }
    .allDiv{
        width: 100%;
        margin: 0 auto;
    }
</style>

<script src="../../../static/common/html5-qrcode.js"></script>

<script>
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        // console.log(stream);

        video.srcObject = stream;
        video.play();

        // 循环获取
        setInterval("capture()", 3000);
    }

    function error(error) {
        js.layer.msg('访问用户媒体设备失败，请刷新页面', {icon: 5});

    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({video: {width: 480, height: 320}}, success, error);
    } else {
        js.layer.msg('不支持访问用户媒体', {icon: 5});
    }

    // 拍照解析
    function capture() {

        let span1 = document.getElementById("span1");
        let span2 = document.getElementById("span2");
        let span3 = document.getElementById("span3");
        let span4 = document.getElementById("span4");
        let span5 = document.getElementById("span5");
        let span6 = document.getElementById("span6");
        let span7 = document.getElementById("span7");
        let span8 = document.getElementById("span8");
        let span9 = document.getElementById("span9");
        span9.innerHTML = span8.innerText;
        span8.innerHTML = span7.innerText;
        span7.innerHTML = span6.innerText;
        span6.innerHTML = span5.innerText;
        span5.innerHTML = span4.innerText;
        span4.innerHTML = span3.innerText;
        span3.innerHTML = span2.innerText;
        span2.innerHTML = span1.innerText;
        span1.innerHTML = "开始扫描....";

        context.drawImage(video, 0, 0, 600, 320);
        let url = canvas.toDataURL('image/jpeg', 1);

        let arr = url.split(','),
            fileType = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            l = bstr.length,
            u8Arr = new Uint8Array(l);

        while (l--) {
            u8Arr[l] = bstr.charCodeAt(l);
        }
        let fileSteam = new File([u8Arr], {
            type: fileType
        });

        var getObjectURL = function (file) {
            var url = null;
            // basic
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
                // mozilla(firefox)
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
                // webkit or chrome
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        qrcode.decode(getObjectURL(fileSteam));
        qrcode.callback = function (imgMsg) {
            if (!imgMsg.search("error")) {
                span9.innerHTML = span8.innerText;
                span8.innerHTML = span7.innerText;
                span7.innerHTML = span6.innerText;
                span6.innerHTML = span5.innerText;
                span5.innerHTML = span4.innerText;
                span4.innerHTML = span3.innerText;
                span3.innerHTML = span2.innerText;
                span2.innerHTML = span1.innerText;
                span1.innerHTML = "扫描失败....";
            } else {
                span9.innerHTML = span8.innerText;
                span8.innerHTML = span7.innerText;
                span7.innerHTML = span6.innerText;
                span6.innerHTML = span5.innerText;
                span5.innerHTML = span4.innerText;
                span4.innerHTML = span3.innerText;
                span3.innerHTML = span2.innerText;
                span2.innerHTML = span1.innerText;
                span1.innerHTML = "扫描成功！";
            }
            span9.innerHTML = span8.innerText;
            span8.innerHTML = span7.innerText;
            span7.innerHTML = span6.innerText;
            span6.innerHTML = span5.innerText;
            span5.innerHTML = span4.innerText;
            span4.innerHTML = span3.innerText;
            span3.innerHTML = span2.innerText;
            span2.innerHTML = span1.innerText;
            span1.innerHTML = "-----------";
            console.log("二维码解析：" + imgMsg)
        }
    }
</script>